import React from 'react'
import {Route, withRouter } from 'react-router-dom';
import CategoryMode from './CategoryMode';
import {inject, observer} from 'mobx-react';
import QueueAnim from 'rc-queue-anim';
import DocConstant from "../../util";
import {Icon, Tools} from 'weaver-mobile';
import { Browser } from 'weaver-mobile-page';
const getLabel = Tools.getLabel;

@inject('netdiskStore')
class NetdiskMatchRoute extends React.Component {
  componentDidMount() {
    let {match} = this.props, {params} = match, {id} = params;;
    this.checkAndInit(id);
  }
  componentWillReceiveProps(nextProps) {
    let {match} = nextProps, {params} = match, {id} = params;;
    this.checkAndInit(id);
  }
  checkAndInit = (id) => {
    const {netdiskStore} = this.props, {listStore} = netdiskStore, {child} = listStore;
    if (isNaN(parseInt(id, 10))) {
      return;
    }
    if (!child || `${child.categoryInfo.id}` !== `${id}`) {
      listStore.setChild({id});
    }
  }
  render() {
    return null;
  }
}

@withRouter
@inject('netdiskStore')
@observer
export default class CategoryRoute extends React.Component{
    render(){
        const {netdiskStore} = this.props
        let {listStore} = netdiskStore,{multiOper,} = netdiskStore;// 这个属性不在render里读出来就不会触发渲染
        let {child} = listStore;//同样，不读出来，修改它时不会触发渲染
        let urlPrefix = "/netdisk";
        return(
            <Route
                key={`netdisk-doc-category`}
                path={urlPrefix}
                render={()=>{
                    return(
                        // 动画效果
                      <div>
                        <QueueAnim className="wea-netdisk-doc-category-queue-anim">
                          <div className="wea-netdisk-doc-category-route" key={`netdisk-doc-category-div`}>
                            <CategoryMode store={listStore} path={urlPrefix}/>
                          </div>
                        </QueueAnim>
                        {this.getMultiOper(listStore, multiOper)/*为了触发渲染写了multiOper，其实没什么实际作用*/}
                        {child && this.getRoute(child, urlPrefix)}
                        <Route
                          key={`netdisk-doc-category`}
                          path={`${urlPrefix}/:id`}
                          component={NetdiskMatchRoute}
                        />
                      </div>
                    )
                }}
            />
        )
    }

/**
   * 递归组成多个列表路由，用以实现返回上一级的功能。
   *
   * @param store
   * @param path
   * @returns {*}
   */
  getRoute = (store, path) => {
    const {categoryInfo, child} = store;
    const id = categoryInfo?categoryInfo.id:'';
    path = path + "/" + id;
    return (
      <Route
        key={`netdisk-doc-category-${id}`}
        path={path}
        render={() => {
          return (
            <div>
              <QueueAnim className="wea-netdisk-doc-category-queue-anim">
                <div className="wea-netdisk-doc-category-route" key={`netdisk-doc-category-${id}-div`}>
                  <CategoryMode store={store} path={path}/>
                </div>
              </QueueAnim>
              {this.getMultiOper(store)}
              {child && this.getRoute(child, path)}
            </div>
          );
        }}
      />
    );
  }

  getMultiOper = (listStore) => {
    const {netdiskStore} = this.props, {multiOper,selectedTab} = netdiskStore;
    return (
      <QueueAnim type="bottom">
        {multiOper &&
        <div className="netdisk-multi-oper" key="netdisk-multi-oper">
          <div className="am-tab-bar-bar">
            {DocConstant.isApp() && selectedTab !=="shareMy" &&
            <div className="am-tab-bar-tab" onClick={() => listStore.multiShare(this.props.history)}>
              <div className="am-tab-bar-tab-icon">
                <Icon type="forward" size="xs"></Icon>
              </div>
              <p className="am-tab-bar-tab-title">{getLabel(126091, '分享')}</p>
            </div>
            }
            {
              selectedTab !=="shareMy" &&
              <div className="am-tab-bar-tab">
                  <Browser
                    label={getLabel(32452, '目录')}
                    store={listStore.browser}
                    hasAdvanceSerach
                    dataParams={{noAllDirName:'1',iscreate:"1"}}
                    type={'doccategory'}
                    onOk={(id,name) => {
                      listStore.multiPublish(id)
                    }}
                  >
                    <div className="am-tab-bar-tab-icon">
                      <Icon type="upload-1" size="xs"></Icon>
                    </div>
                    <p className="am-tab-bar-tab-title">{getLabel(129148, '发布到系统')}</p>
                  </Browser>
                </div>
            }
            { selectedTab !=="shareMy" &&
                <div className="am-tab-bar-tab" onClick={listStore.multiDelete}>
                  <div className="am-tab-bar-tab-icon">
                    <Icon type="delete" size="xs"></Icon>
                  </div>
                  <p className="am-tab-bar-tab-title">{getLabel(91, '删除')}</p>
                </div>
                }
                <div className="am-tab-bar-tab" onClick={() => listStore.multiMove(this.props.history)}>
                  <div className="am-tab-bar-tab-icon">
                    <Icon type="ellipsis" size="xs"></Icon>
                  </div>
                  <p className="am-tab-bar-tab-title">{getLabel(78, '移动')}</p>
              </div>
          </div>
        </div>
        }
      </QueueAnim>
    );
  }

}